/*
 * icenter page
**/
<template>
<div>
<div class="quick-footernav"><router-link to="/icenter" class="ui-btn">&nbsp;&nbsp;返回&nbsp;&nbsp;</router-link></div>
<div class="mod-page-tit">兑换记录</div>
<div class="weui-cells" v-load-more="loaderMore">
  <div class="weui-cell" v-for="item in exchangeList" @click="exchange(item.rcv_status)">
    <div class="weui-cell__bd">
      <span style="font-size:14px;">{{item.title}}</span>
    </div>
    <div class="weui-cell__ft">
      <p style="font-size: 13px;color: #ffa200;" v-if="item.rcv_status === '1'">已领取</p>
      <p style="font-size: 13px;color: #73db3a;" v-if="item.rcv_status === '2' || item.rcv_status === '3'">未发放</p>
      <p style="font-size: 13px;color: #73db3a;" v-else-if="item.rcv_status === '4'">未领取</p>
      <p style="font-size: 13px;color: #999;" v-else-if="item.rcv_status === '0' || item.rcv_status === '5'">已过期</p>
      <p style="font-size: 12px;">{{item.create_time}}</p>
    </div>
  </div>
  <div class="weui-loadmore" v-if="showLoading">
    <i class="weui-loading"></i>
    <span class="weui-loadmore__tips">正在加载</span>
  </div>
  <div class="weui-loadmore weui-loadmore_line" v-if="touchend">
      <span class="weui-loadmore__tips">没有更多</span>
  </div>
</div>
<div class="mod-footer-place"></div>
<modal-dialog ref="dialog"></modal-dialog>
</div>
</template>
<script>
import vTab from 'components/common/tab'
import modalDialog from '../../components/dialog'
import {loadMore} from 'src/config/mixin'
import {getUserExchangeRecord} from 'src/service/getData'
import {mapState} from 'vuex'
export default {
  data () {
    return {
      exchangeList: [],
      offset: 1, // 批次加载数据 每次+1
      pageSize: 16, // 每页显示数据条数
      preventRepeatReuqest: false, // 到达底部加载数据，防止重复加载
      showLoading: true, // 显示加载动画
      touchend: false // 没有更多数据
    }
  },
  mixins: [loadMore],
  components: {
    modalDialog,
    'v-tab': vTab
  },
  computed: {
    ...mapState([
      'I9RIA'
    ])
  },
  mounted () {
    if (this.I9RIA && this.I9RIA.wxJsApiConf) {
      this.initData()
    }
  },
  methods: {
    exchange (state) {
      if (state === '0' || state === '5') {
        this.$refs.dialog.confirm('<p>该红包24小时未领取，已退回。<br>亲下次要及时领取哦～。</p>', {
          type: 'alert'
        })
      }
      if (state === '2' || state === '3') {
        this.$refs.dialog.confirm('<span style="color:#ffa200">“游戏化赢销“</span>兑正在派发该<br>红包，请留意微信消息。', {
          type: 'alert'
        })
      }
      if (state === '1') {
        this.$refs.dialog.confirm('该红包已通过<span style="color:#ffa200">“游戏化赢销“<br></span>公众号发放，请到公众号中领取。', {
          // title: '<span style="color:#feb902">兑换成功！</span>',
          type: 'alert'
        })
      }
      if (state === '4') {
        this.$refs.dialog.confirm('该红包已通过<span style="color:#ffa200">“游戏化赢销“<br></span>公众号发出，请到该公众号中领取。', {
          // title: '<span style="color:#feb902">兑换成功！</span>',
          type: 'alert'
        })
      }
    },
    async initData () {
      let tmpData = await getUserExchangeRecord(this.offset, this.pageSize)
      this.showLoading = false
      this.touchend = true
      this.preventRepeatReuqest = false
      if (tmpData.code !== 0) return
      if (tmpData.data.list.length < this.pageSize) {
        this.touchend = true
      } else {
        this.touchend = false
      }
      this.exchangeList = tmpData.data.list
    },
    async loaderMore () {
      if (this.touchend) {
        return
      }
      // 防止重复请求
      if (this.preventRepeatReuqest) {
        return
      }
      this.showLoading = true
      this.preventRepeatReuqest = true

      // 数据的定位+1
      this.offset++
      let res = await getUserExchangeRecord(this.offset, this.pageSize)
      if (res.code !== 0) {
        this.showLoading = false
        this.touchend = true
        this.preventRepeatReuqest = false
        return
      }
      res.data.list = res.data.list || []
      this.showLoading = false
      this.exchangeList = [...this.exchangeList, ...res.data.list]
      // 当获取数据小于20，说明没有更多数据，不需要再次请求数据
      if (res.data.list.length < this.pageSize) {
        this.touchend = true
        return
      }
      this.preventRepeatReuqest = false
    }
  },
  watch: {
    I9RIA (res) {
      let val = res || {}
      if (val && val.wxJsApiConf) {
        this.initData()
      }
      if (val.code === 9999) {
        this.$router.push('/404')
      }
    }
  }
}
</script>
<style scoped>
#searchBar{background:#fff;}
.weui-search-bar__box, .weui-search-bar__form, .weui-search-bar__label{background:#fff; border-color:#fff;}
.weui-search-bar__label .fl{font-size:.14rem; background:#fff; color:#ffa200; line-height:26px;}
.weui-search-bar_focusing .weui-search-bar__box,
.weui-search-bar_focusing .weui-search-bar__form,
.weui-search-bar_focusing .weui-search-bar__box{background:#EFEFF4; border-radius:8px;}
.weui-search-bar__cancel-btn{color:#ffa200;}
</style>
